<template>
  <div id='audit'>
    <!-- 审核 -->
    <div class="audit" v-if="noServe">
      <a-radio-group v-model="form[statusName]">
        <a-radio :value="success"> 同意 </a-radio>
        <a-radio :value="fail"> 驳回 </a-radio>
      </a-radio-group>
      <div class="flex">
        <div class="input-box">
          <a-textarea v-model="form[remark]" :rows="2" placeholder="审批说明" />
        </div>
        <a-button v-if="noButton" type="primary" @click="handleConfirm">确定</a-button>
      </div>
    </div>
    <!-- 服务费 -->
    <div class="audit" v-else>
      <a-form-model ref="form" :model="form" :rules="rules" :label-col="{span: 3}" :wrapper-col="{span: 10}">
        <a-form-model-item label="服务费" prop="service_charge">
          <a-input-number
            :min="0"
            v-model="form.service_charge"
            placeholder="请输入服务费"
            :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
          />
        </a-form-model-item>
        <a-form-model-item label="审批意见" prop="status">
          <a-radio-group v-model="form[statusName]">
            <a-radio :value="success"> 审批通过 </a-radio>
            <a-radio :value="fail"> 审核不通过 </a-radio>
          </a-radio-group>
          <div class="flex">
            <div class="input-box">
              <a-textarea autoSize v-model="form[remark]" placeholder="审批备注" />
            </div>
            <a-button type="primary" @click="handleConfirmForm">确定</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script lang='ts'>
  import { Validate } from '@/decorator'
import {Component, Watch, Vue, Prop} from 'vue-property-decorator'

  @Component
  export default class Audit extends Vue {
    @Prop({ type: Object, default: () => ({auditStatus: undefined, remark: ''}) }) form!: any
    @Prop({ type: String, default: 'auditStatus' }) statusName!: string
    @Prop({ type: String, default: 'remark' }) remark!: string
    @Prop({ type: Number, default: 1 }) success!: number
    @Prop({ type: Number, default: 2 }) fail!: number
    @Prop({ type: Boolean, default: true }) noButton!: boolean // 是否展示确定按钮
    @Prop({ type: Boolean, default: true }) noServe!: boolean // 有没有服务费
    @Prop({ type: Object, default: () => ({}) }) rules!: any // 有服务费的校验规则

    handleConfirm () {
      this.$emit('confirm')
    }
    @Validate('form')
    handleConfirmForm () {
      this.$emit('confirm')
    }
  }
</script>
<style lang='scss' scoped>
.audit {
  margin: 10px 0;
  .input-box {
    width: 300px;
    margin-right: 20px;
  }
  .flex {
    margin-top: 10px;
  }
}
</style>
